<template>
  <div class="container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="openid">
        <el-input v-model="ruleForm.openid"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="ruleForm.nickName"></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="role" class="role">
        <el-radio-group v-model="ruleForm.role">
          <el-radio label="普通管理员"></el-radio>
          <el-radio label="超级管理员"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存
        </el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      ruleForm: {
        openid: '',
        username: '',
        password: '',
        nickName: '',
        role: ''
      },
      rules: {
        openid: [{ required: true, message: '请输入openid', trigger: 'blur' }],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: this.pwdRule, trigger: 'blur' }
        ],
        nickName: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        role: [{ required: true, message: '请选择角色', trigger: 'change' }]
      },
      action: ''
    }
  },
  created() {
    const { action, info } = this.$route.params
    this.action = action
    if (action === 'edit') {
      this.ruleForm = info
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$http
            .post('/saveAdmin', this.ruleForm)
            .then(res => {
              if (res.data === 'success') {
                this.$message.success('保存成功')
                this.$router.push({
                  name: 'Admin'
                })
              } else {
                this.$message.error('服务器失败')
              }
            })
            .catch(err => {
              this.$message.error('服务器失败')
            })
        } else {
          this.$message.error('请按照红色文字提示进行填写')
          return false
        }
      })
    },
    cancel() {
      this.$router.push({
        name: 'Admin'
      })
    },
    pwdRule(rule, value, callback) {
      const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/
      if (!re.test(value)) {
        callback('最少八个字符，至少一个大写字母，一个小写字母和一个数字')
      } else {
        callback()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-color: #fff;
  padding: 10px;
  .el-form {
    margin-top: 20px;
    width: 50%;
    .role {
      text-align: left;
    }
  }
}
</style>
  